{% extends "../base.html" %}

{% block title %} 消息盒子 {% end %}
{% block css %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
.layim-msgbox{margin: 15px;}
.layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
.layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
.layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
.layim-msgbox li p span{padding-left: 5px; color: #999;}
.layim-msgbox li p em{font-style: normal; color: #FF5722;}
.layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
.layim-msgbox-user{padding-top: 5px;}
.layim-msgbox-content{margin-top: 3px;}
.layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
.layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
</style>
{% end %}
{% block body %}
<ul class="layim-msgbox" id="LAY_view"></ul>
{% end %}

{% block javascript %}

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
    <%# layui.each(d.data, function(index, item){
        if(item.msgtype == 'apply_friend' || item.msgtype == 'apply_group'){ %>
        <li data-id="<% item.id %>" data-uid="<% item.from_user.id %>" data-type="<%item.msgtype%>" data-username="<% item.from_user.username %>" data-sign="<% item.from_user.sign %>">
            <a href="javascript:void(0);" target="_blank">
                <img src="<%item.from_user.avatar%>" class="layui-circle layim-msgbox-avatar" onerror="javascript:this.src=default_avatar">
            </a>
            <p class="layim-msgbox-user">
                <a href="javascript:void(0);" target="_blank">
                    <b><% item.from_user.username||'' %></b>
                </a>
                <span><% item.created_at %></span>
            </p>
            <p class="layim-msgbox-content">
            <%# if(item.msgtype == 'apply_friend'){ %>
            申请添加你为好友
            <%# }else{ %>
            申请加入 <% item.groupName||'' %> 群
            <%# } %>
            <span><% item.message ? '附言: '+item.message : '' %></span>
             </p>
            <p class="layim-msgbox-btn" friend_id="<% item.related_id %>">
                <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
                <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
            </p>
        </li>

        <%# } else if(item.msgtype == 2) { %>
            <%# if(item.from == d.curr_user_id){ %>
                <li data-id="<% item.id %>" class="layim-msgbox-system">
                    <p><em>系统：</em><b><% item.username %></b>
                    <%# if(item.status == 2 || item.status == 4){ %>
                    已同意你的好友申请 <button class="layui-btn layui-btn-xs btncolor chat" data-name="<% item.username %>" data-chattype="friend" data-type="chat" data-uid="<%item.to%>">发起会话</button>
                    <%# }else{ %>
                    已拒绝你的好友申请
                    <%# } %>
                    <span><% item.readTime %></span></p>
                </li>
            <%# }else{ %>
                <li data-id="<% item.id %>" >
                  <a href="javascript:void(0);" target="_blank">
                    <img src="http://test.guoshanchina.com/uploads/person/<% item.from %>.jpg" class="layui-circle layim-msgbox-avatar" onerror="javascript:this.src='../../../../../../uploads/person/empty2.jpg'">
                  </a>
                  <p class="layim-msgbox-user">
                    <a href="javascript:void(0);" target="_blank"><b><% item.username||'' %></b></a>
                    <span><% item.sendTime %></span>
                  </p>
                  <p class="layim-msgbox-content">
                    申请添加你为好友
                    <span><% item.remark ? '附言: '+item.remark : '' %></span>
                    <%# if(item.status == 2 || item.status == 4){ %>
                    <button class="layui-btn layui-btn-xs btncolor chat" data-name="<% item.username %>" data-chattype="friend" data-type="chat" data-uid="<%item.from%>">发起会话</button>
                    <%# } %>

                  </p>
                  <p class="layim-msgbox-btn">
                    <%# if(item.status == 2 || item.status == 4){ %>
                    已同意
                    <%# }else{ %>
                    已拒绝
                    <%# } %>
                  </p>
                </li>
            <%# } %>

        <%# }else if(item.msgtype == 4){ %>
            <%# if(item.from == d.curr_user_id){ %>
                <li data-id="<% item.id %>" class="layim-msgbox-system">
                    <p><em>系统：</em> 管理员 <% item.handle %>
                    <%# if(item.status == 2 || item.status == 4){ %>
                    已同意你加入群 <b><% item.groupName %></b> <button class="layui-btn layui-btn-xs btncolor chat" data-name="<% item.groupName %>" data-chattype="group" data-type="chat" data-uid="<%item.to%>">发起会话</button>
                    <%# }else{ %>
                    已拒绝你加入群 <b><% item.groupName %></b>
                    <%# } %>
                    <span><% item.readTime %></span></p>
                </li>
            <%# }else{ %>
                <li data-id="<% item.id %>" class="layim-msgbox-system">
                    <p>
                        <em>系统：</em>
                        管理员<% item.handle %>
                        <%# if(item.status == 2 || item.status == 4){ %>
                        已同意 <b><% item.username %></b> 加入群 <b><% item.groupName %></b>
                        <%# }else{ %>
                        你已拒绝 <b><% item.username %></b> 加入群 <b><% item.groupName %></b>
                        <%# } %>
                        <span><% item.readTime %></span>
                    </p>
                </li>
            <%# } %>

        <%# }
    }); %>
</textarea>

<script type="text/javascript">
layui.use([ 'layim', 'laytpl','flow','form',], function(){
    var layim = layui.layim, layer = layui.layer, laytpl = layui.laytpl, $ = layui.jquery, flow = layui.flow;
    var msg_ids = []
    laytpl.config({
        open: '<%',
        close: '%>'
    });

    var cache = parent.layui.layim.cache();
    // console.log(cache)

    var formatDate = function (now) {
         var myDate = new Date(now);
         var month = myDate.getMonth()+1;
         var date = myDate.getDate();
         return month+"月"+date+"日";
    }
    //请求消息
    var renderMsg = function (page, callback){
        //实际部署时，请将下述 getmsg.json 改为你的接口地址
        var url = cache.base.msg_url
        // console.log(url)
        $.ajax({
            type: "GET",
            url: url,
            data: {
                page: page || 1,
                '_xsrf':get_xsrf()
            },
            success: function(res) {
                if(res.code != 0){
                    return layer.msg(res.msg);
                }
                layui.each(res.data, function(index, item){
                    // console.log('item.id', item.id)
                    if (item.status==0) {
                        msg_ids.push(item.id)
                    }
                    res.data[index]['created_at'] =  formatDate(item.created_at);
                    res.data[index]['read_at'] =  formatDate(item.read_at);
                });
                callback && callback(res.data, res.pages,res.curr_user_id);
            },
            error: function(xhr){
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    layer.msg(xhr.responseJSON.msg)
                } else {
                    layer.msg('未知错误')
                }
            }
        })
    };

    //消息信息流
    flow.load({
        elem: '#LAY_view' //流加载容器
        , isAuto: false
        , end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
        , done: function (page, next) { //加载下一页
            // console.log("page: ", page)
            renderMsg(page, function (data, pages, curr_user_id) {
                var html = laytpl(LAY_tpl.value).render({
                    data: data
                    , page: page
                    , curr_user_id: curr_user_id
                });
                // console.log("data: ", data)
                // console.log("html", html)
                next(html, page < pages);
            });
        }
    });

    //操作
    var active = {
        IsExist: function (avatar){ //判断头像是否存在
            var ImgObj=new Image();
            ImgObj.src= avatar;
             if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0))
             {
               return true;
             } else {
               return false;
            }
        },
        agree: function (othis) {
            parent.im_events.addFriend.call(othis, 'agree');
        }
        //拒绝
        , refuse: function (othis) {
            parent.im_events.addFriend.call(othis, 'refuse');
        },
        //发起好友聊天
        chat: function(othis){
            var uid = othis.data('uid')
            var avatar = othis.data('avatar');
            parent.layui.layim.chat({
                name: othis.data('name')
                ,type: othis.data('chattype')
                ,avatar: avatar
                ,id: uid
            });
        }

    };
    //打开页面即把系统消息标记为已读
    $(function(){
        setTimeout(function() {
            // console.log('msg_ids: ', msg_ids)
            if (msg_ids.length>0) {
                parent.im_events.readMsg.call(this, msg_ids)
            }
        }, 100)
    });
    $('body').on('click', '.layui-btn', function () {
        var othis = $(this)
        var type = othis.data('type')
        active[type] ? active[type].call(this, othis) : ''
    });
});
</script>
{% end %}
